<template>
    <div >
        <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
             <span class="iconfont">&#xe624;</span>
        </router-link>
        <div class="header-fixed" :style="opacityStyle" v-show="!showAbs">
            <router-link  to="/">
                <span class="iconfont header-back">&#xe624;</span>
            </router-link>
            景点详情
        </div>
    </div>
</template>

<script>
    export default {
        name:'DetailHeader',
        data(){
            return{
                showAbs:true,
                opacityStyle:{
                    opacity:0
                }
            }
        },
        methods:{
            handleScroll(){
              const top= document.documentElement.scrollTop;
              if(top>60){
                  let opacity=top/140;
                  opacity = opacity > 1 ? 1 : opacity
                  this.opacityStyle={
                      opacity:opacity
                  }
                 this.showAbs=false;
              }else{
                  this.showAbs=true;
              }
            }
        },
        activated(){
            window.addEventListener("scroll",this.handleScroll)
        },
        deactivated() {
            window.removeEventListener("scroll",this.handleScroll)
        }
    }
</script>

<style scoped lang="scss">
    @import '~styles/varibles.scss';
    .header-abs{
        position:absolute;
        left:0.2rem;
        top:0.2rem;
        width:0.8rem;
        height:0.8rem;
        border-radius:0.4rem;
        text-align:center;
        line-height:0.8rem;
        background:rgba(0,0,0,0.8);
        span{
            color:#fff;
            font-size:.4rem;
        }
    }
    .header-fixed{
        position:fixed;
        z-index:2;
        top:0;
        left:0;
        right:0;
        overflow:hidden;
        height:0.86rem;
        line-height:0.86rem;
        text-align:center;
        color:#fff;
        background:$bgColor;
        font-size:0.32rem;
        .header-back{
            position:absolute;
            top:0;
            left:0;
            width:0.64rem;
            text-align:center;
            font-size:0.4rem;
            color:#fff;
        }
    }
</style>